import {
  init,
  classModule,
  propsModule,
  styleModule,
  eventListenersModule,
  h,
} from "snabbdom";



const patch = init([
  classModule, // makes it easy to toggle classes
  propsModule, // for setting properties on DOM elements
  styleModule, // handles styling on elements with support for animations
  eventListenersModule, // attaches event listeners
]);
function changeNode() {
  this.children.length>=3? patch (vnode, newVnode) : patch (newVnode, vnode)
}
const container  = document.getElementById('container')

const vnode = h("div#container.two.classes", { on: { click: changeNode } }, [
  h("span",  { style: { fontWeight: "bold", color: 'red' } }, "This is bold"),
  " and this is just normal text",
  h("a", { props: { href: "/foo" } }, "I'll take you places!"),
]);
const newVnode = h(
  "div#container.two.classes",
  { on: { click: changeNode }},
  [
    h(
      "span",
      { style: { fontWeight: "normal", fontStyle: "italic" } },
      "This is now italic type"
    ),
    h("a", { props: { href: "/bar" } }, "I'll take you places!"),
  ]
);

patch (container, vnode);